<template>
  <div class="beauty">

    <label class="input_label" :class="{isReset}"><i :class="placeholder.icon" style="margin-right: 10px"></i>{{placeholder.name}}</label>
    <el-input
        v-bind="$attrs"
        v-model="inputModel"
        class="beauty_input"
        :class="{isFocusing}"
        @focus="_handleFocus"
        @blur="_handleBlur">
          <slot slot="suffix" name="suffix"></slot>
          <slot slot="prefix" name="prefix"></slot>
    </el-input>
  </div>
</template>

<script>
/**
 * ***********************************************************************
 * ***********************************************************************
 * ***********************************************************************
 * ***********************************************************************
 * 该组件与正常使用el-input用法完全一致，内部都做了透传封装，使用文档只用查看el-input
 * ***********************************************************************
 * ***********************************************************************
 * ***********************************************************************
 * ***********************************************************************
 */
export default {
  props: ['value', 'placeholder'],
  computed: {
    inputModel: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
    }
  },
  data () {
    return {
      // true：在input的上面  false:显示在input中
      isReset: true,
      // true 当前标签正在聚焦  false 失去焦点
      isFocusing: false
    }
  },
  methods: {
    // 输入框聚焦
    _handleFocus () {
      this.isFocusing = true
      this.isReset = true
    },
    // 输入框失去焦点
    _handleBlur () {
      if (!this.inputModel) this.isReset = false
      this.isFocusing = false
    }
  },
  mounted () {
    setTimeout(() => {
      if (!this.inputModel) this.isReset = false
    }, 200)
  }
}
</script>
<style lang="less">
  .beauty {
    position: relative;
    width: 100%;
    height: 54px;
    .input_label {
      display: inline-block;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:600;
      transition: all 0.28s;
      transform: translateY(25px);
      color: #8dfef6;
      font-size: 22px;
      &.isReset {
        transform: translateY(0);
        color: #00b3c0;
        font-size: 14px;
      }
    }
    .beauty_input {
      position: relative;
      height: 37px;
      &::before {
        transition: width .5s;
        position: absolute;
        top: 36px;
        left: 0;
        content: ' ';
        width: 0;
        height: 1px;
        background-color:#8dfef6;
        font-weight: 500;
      }
      &.isFocusing::before {
        width: 100%;
      }
      .el-input__inner {
        height: 37px;
        line-height: 37px;
        padding: 0;
        border-radius: 0;
        color: #8dfef6;
        font-size: 20px;
        border: none;
        background-color: rgba(255, 255, 255, 0);
        caret-color:#8dfef6;
        border-bottom: 1px solid rgba(216,216,216,0.9);
      }
    }
  }
</style>
